<h3>Grid Masonry
   <small>Pure CSS and mobile first with a fallback to inline grid.</small>
</h3>
<div class="row-masonry row-masonry-xl-6 row-masonry-lg-4 row-masonry-md-3 row-masonry-sm-2">
   <div class="col-masonry">
      <div class="box-placeholder m0">
         <p class="text-center text-muted">
            <strong>Masonry Item</strong>
         </p>
         <p>Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula. Vestibulum ante ipsum primis in faucibus orci et ultrices posuere cubilia Curae; Class taciti conubia nostra, per himenaeos.</p>
      </div>
   </div>
   <div class="col-masonry">
      <div class="box-placeholder m0">
         <p class="text-center text-muted">
            <strong>Masonry Item</strong>
         </p>
         <p>Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula.</p>
      </div>
   </div>
   <div class="col-masonry">
      <div class="box-placeholder m0">
         <p class="text-center text-muted">
            <strong>Masonry Item</strong>
         </p>
         <p>Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula. Vestibulum ante ipsum primis in faucibus orci et ultrices posuere cubilia Curae; Class taciti conubia nostra, per himenaeos.</p>
      </div>
   </div>
   <div class="col-masonry">
      <div class="box-placeholder m0">
         <p class="text-center text-muted">
            <strong>Masonry Item</strong>
         </p>
         <p>Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula. Vestibulum ante ipsum primis in faucibus orci et ultrices posuere cubilia Curae; Class taciti conubia nostra, per himenaeos.</p>
      </div>
   </div>
   <div class="col-masonry">
      <div class="box-placeholder m0">
         <p class="text-center text-muted">
            <strong>Masonry Item</strong>
         </p>
         <p>Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula.</p>
      </div>
   </div>
   <div class="col-masonry">
      <div class="box-placeholder m0">
         <p class="text-center text-muted">
            <strong>Masonry Item</strong>
         </p>
         <p>Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula. Vestibulum ante ipsum primis in faucibus orci et ultrices posuere cubilia Curae; Class taciti conubia nostra, per himenaeos.</p>
      </div>
   </div>
   <div class="col-masonry">
      <div class="box-placeholder m0">
         <p class="text-center text-muted">
            <strong>Masonry Item</strong>
         </p>
         <p>Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula. Vestibulum ante ipsum primis in faucibus orci et ultrices posuere cubilia Curae; Class taciti conubia nostra, per himenaeos.</p>
      </div>
   </div>
   <div class="col-masonry">
      <div class="box-placeholder m0">
         <p class="text-center text-muted">
            <strong>Masonry Item</strong>
         </p>
         <p>Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula.</p>
      </div>
   </div>
   <div class="col-masonry">
      <div class="box-placeholder m0">
         <p class="text-center text-muted">
            <strong>Masonry Item</strong>
         </p>
         <p>Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula. Vestibulum ante ipsum primis in faucibus orci et ultrices posuere cubilia Curae; Class taciti conubia nostra, per himenaeos.</p>
      </div>
   </div>
   <div class="col-masonry">
      <div class="box-placeholder m0">
         <p class="text-center text-muted">
            <strong>Masonry Item</strong>
         </p>
         <p>Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula. Vestibulum ante ipsum primis in faucibus orci et ultrices posuere cubilia Curae; Class taciti conubia nostra, per himenaeos.</p>
      </div>
   </div>
   <div class="col-masonry">
      <div class="box-placeholder m0">
         <p class="text-center text-muted">
            <strong>Masonry Item</strong>
         </p>
         <p>Aenean scelerisque suscipit arcu a consectetur.</p>
      </div>
   </div>
   <div class="col-masonry">
      <div class="box-placeholder m0">
         <p class="text-center text-muted">
            <strong>Masonry Item</strong>
         </p>
         <p>Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula. Vestibulum ante ipsum primis in faucibus orci et ultrices posuere cubilia Curae; Class taciti conubia nostra, per himenaeos.</p>
      </div>
   </div>
</div>
<h4 class="page-header">Masonry with any kind of element</h4>
<div class="row-masonry row-masonry-md-4 row-masonry-sm-2">
   <div class="col-masonry">
      <img src="app/img/bg1.jpg" alt="" class="img-thumbnail img-responsive" />
   </div>
   <div class="col-masonry">
      <img src="app/img/bg4.jpg" alt="" class="img-thumbnail img-responsive" />
   </div>
   <div class="col-masonry">
      <img src="app/img/bg2.jpg" alt="" class="img-thumbnail img-responsive" />
   </div>
   <div class="col-masonry">
      <img src="app/img/bg5.jpg" alt="" class="img-thumbnail img-responsive" />
   </div>
   <div class="col-masonry">
      <img src="app/img/bg6.jpg" alt="" class="img-thumbnail img-responsive" />
   </div>
   <div class="col-masonry">
      <img src="app/img/bg7.jpg" alt="" class="img-thumbnail img-responsive" />
   </div>
   <div class="col-masonry">
      <img src="app/img/bg8.jpg" alt="" class="img-thumbnail img-responsive" />
   </div>
   <div class="col-masonry">
      <img src="app/img/bg9.jpg" alt="" class="img-thumbnail img-responsive" />
   </div>
   <div class="col-masonry">
      <img src="app/img/bg10.jpg" alt="" class="img-thumbnail img-responsive" />
   </div>
</div>
<p>Supported from IE10. <a href="http://caniuse.com/#feat=multicolumn">Can I Use.</a>
</p>